<template>
  <div>
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 mb-3">
      <div class="flex items-center gap-2">
        <input v-model="q" placeholder="搜索资产 (e.g. BTC)" class="border rounded p-2" />
        <select v-model="marketFilter" class="border rounded p-2">
          <option value="">全部</option>
          <option value="spot">Spot</option>
          <option value="deriv">Deriv</option>
        </select>
      </div>

      <div class="flex items-center gap-2 text-sm text-gray-600">
        <div>排序：</div>
        <select v-model="sortKey" class="border rounded p-2">
          <option value="symbol">Symbol</option>
          <option value="price">Price</option>
          <option value="change">Change%</option>
        </select>
        <button @click="toggleOrder" class="px-3 py-1 border rounded">{{ orderDesc ? '降序' : '升序' }}</button>
      </div>
    </div>

    <table class="w-full table-auto">
      <thead>
        <tr class="text-left text-sm text-gray-500">
          <th class="p-2">资产</th>
          <th class="p-2">市场</th>
          <th class="p-2">价格</th>
          <th class="p-2">24h 变动%</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="row in pageData" :key="row.symbol" class="border-t">
          <td class="p-2 font-medium">{{ row.symbol }}</td>
          <td class="p-2">{{ row.market }}</td>
          <td class="p-2">{{ row.price.toFixed(2) }}</td>
          <td class="p-2" :class="row.change>=0 ? 'text-green-600' : 'text-red-600'">{{ row.change.toFixed(2) }}%</td>
        </tr>
      </tbody>
    </table>

    <div class="mt-3 flex items-center justify-between">
      <div class="text-sm text-gray-500">共 {{ filtered.length }} 条</div>
      <div class="flex items-center gap-2">
        <button @click="prev" :disabled="page===1" class="px-3 py-1 border rounded">上一页</button>
        <div class="px-2">{{ page }} / {{ totalPages }}</div>
        <button @click="next" :disabled="page===totalPages" class="px-3 py-1 border rounded">下一页</button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, watch } from 'vue'
import { getMarketList } from '../api/mockData.js'

const q = ref('')
const marketFilter = ref('')
const sortKey = ref('symbol')
const orderDesc = ref(false)
const page = ref(1)
const pageSize = 6

const list = getMarketList()

const filtered = computed(() => {
  let res = list.filter(i => {
    return (!marketFilter.value || i.market===marketFilter.value) &&
           (!q.value || i.symbol.toLowerCase().includes(q.value.toLowerCase()))
  })
  res.sort((a,b) => {
    const k = sortKey.value
    if (a[k] < b[k]) return orderDesc.value ? 1 : -1
    if (a[k] > b[k]) return orderDesc.value ? -1 : 1
    return 0
  })
  return res
})

const totalPages = computed(() => Math.max(1, Math.ceil(filtered.value.length / pageSize)))
const pageData = computed(() => filtered.value.slice((page.value-1)*pageSize, page.value*pageSize))

function toggleOrder(){ orderDesc.value = !orderDesc.value }
function prev(){ if(page.value>1) page.value-- }
function next(){ if(page.value<totalPages.value) page.value++ }

// reset page when filters change
watch([q, marketFilter, sortKey, orderDesc], ()=> { page.value = 1 })
</script>
